<template>
  <div class="goods">
    <!-- 位置显示 -->
    <div class="position">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }"
          >用户中心</el-breadcrumb-item
        >
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 1. 搜索区域 -->
    <div class="header">
      <el-form :inline="true" class="demo-form-inline">
        <!-- <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item> -->
        <el-form-item label="用户名">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 2. 表格区域展示视图数据 -->
    <div class="wrapper">
      <table border="1" style="border: 1px solid #bbb" cellspacing="0">
        <tr>
          <th style="width: 80px">用户ID</th>
          <th style="width: 180px">昵称</th>
          <th style="width: 280px">电话号码</th>
          <th style="width: 500px">邮箱</th>
          <th style="width: 80px">冻结状态</th>
          <th style="width: 300px">操作</th>
        </tr>
        <tr
          v-for="v in tableData"
          :key="v.uid"
          :p="v"
          class="tb"
          style="height: 80px"
        >
          <td>{{ v.uid }}</td>
          <td>{{ v.unickname }}</td>
          <td>{{ v.uphone }}</td>
          <td>{{ v.uemail }}</td>
          <td class="dongjie" v-if="v.ustatus == 1" style="color: #cc3333">
            已冻结
          </td>
          <td class="dongjie" v-if="v.ustatus == 0" style="color: #00cc00">
            正常
          </td>
          <td>
            <span
              class="sp"
              :class="{ disabled: v.ustatus == 1 }"
              @click="freezeUser(v.uid)"
              style="color: #cc3333; cursor: pointer"
              >冻结用户</span
            >
            <span
              class="sp1"
              :class="{ disabled: v.ustatus == 0 }"
              @click="freezeCancel(v.uid)"
              style="color: #00cc00; cursor: pointer"
              >解除冻结</span
            >
          </td>
        </tr>
      </table>
    </div>

    <!-- 3. 分页 -->
    <MyPagination
      :total="pagecount"
      :pagerCount="pagecount"
      :pageSize="pageSize"
      @changePage="changePage"
      :currentPage="currentPage"
    />
  </div>
</template>

<script>
import MyPagination from "../../components/MyPagination.vue";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      input: "",
      tableData: [],
      total: 10,
      pageSize: 1,
      type: 1,
      list: [],
      dialogVisible: false,
      currentPage: 1, //选中的高亮页码
      title: "添加商品",
      rowData: {}, //当前行的数据对象
      page: "",
      searchItem: "",
      pagecount:0,
    };
  },
  methods: {
    search() {
      const url = `http://1.14.30.101:8888/searchuser`;

      const params = `searchitem=${this.input}`;
      console.log(params);

      this.$http.post(url, params).then((res) => {
        console.log("搜索---", res.data);
        this.currentPage = 1;
        if (res.status === 200) {
          this.tableData = res.data.result; //获取的搜索的总数据条数---数据分割
          console.log("res", res.result);
          console.log("tableData", this.tableData);
          //假设需要分页---我们处理分页----
          this.total = res.data.result.length;
          this.pageSize = 3;
          this.tableData = res.data.result.slice(0, 3);
          this.type = 2;
          console.log("分页", this.currentPage);
        } else {
          this.tableData = [];
          this.total = 1;
          this.pageSize = 1;
          this.type = 1;
        }
      });
    },

    freezeUser(uid) {
      const url = `http://1.14.30.101:8888/updateuserfreez`;
      const params = `uid=${uid}`;
      console.log(params);
      this.$http.post(url, params).then((res) => {});
      location.reload();
    },
    freezeCancel(uid) {
      const url = `http://1.14.30.101:8888/updateusernormal`;
      const params = `uid=${uid}`;
      console.log(params);
      this.$http.post(url, params).then((res) => {});
      location.reload();
    },
    http(page = 1) {
      const url = `http://1.14.30.101:8888/getuser?page=` + page;
      this.$http.get(url).then((res) => {
        console.log(res);
        this.pagecount = res.data.pagecount;
        this.page = res.data.page;
        this.total = res.data.rowcount;
        this.tableData = res.data.results;
        console.log("tableData", this.tableData);
      });
    },
    changePage(page) {
      this.currentPage = page;
      console.log(page);
      console.log(this.currentPage);

      if (this.type == 1) {
        this.http(page); //商品列表分页
      } else {
        //搜索分页 1 2 3 4 --  list=[0,1,2,3,4,5,6,7,8]  0-3  3-6  6-9 9-12
        console.log("搜索的分页处理---");
        //（num-1）*3  num*3
        this.tableData = this.list.slice((num - 1) * 3, num * 3);
      }
    },
  },
  //所有用户
  created() {
    this.http();
  },
};
</script>

<style lang='less' scoped>
.dongjie {
  text-align: center;
}
.goods {
  margin: 10px;
}
.position {
  // background: #fff;
  padding: 10px;
  // border: 1px solid #eee;
  margin-bottom: 10px;
}
.header {
  display: flex;
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
  button {
    margin-left: 20px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
.wrapper {
  margin: 10px 0;
}
.sp {
  display: inline-block;
  border: 2px solid gray;
  height: 26px;
  line-height: 26px;
  margin-left: 30px;
  padding: 0 10px;
  border-radius: 4px;
  &.disabled {
    pointer-events: none;
    border-color: lightgray;
    color: lightgray;
  }
}
.sp1 {
  display: inline-block;
  border: 2px solid gray;
  height: 26px;
  line-height: 26px;
  margin-left: 20px;
  padding: 0 10px;
  border-radius: 4px;
  &.disabled {
    pointer-events: none;
    border-color: lightgray;
    color: lightgray;
  }
}
</style>